<template>
      <div class="edu-page-warp">
        <div class="edu-page-title">
            <span
                v-for="(item, index) in topNavItems"
                :class="{active: item.active}"
                :key="index"
                class="border-right"
                @click="clickItem(item)"
            >{{ item.label }}</span>
            <template
                v-if="!($store.state.session.mockUser && $store.state.session.mockUser.type == 2)"
            >
                <el-button
                    v-if="dataType === 2"
                    type="text"
                    style="float: right;"
                    @click="exportDoc(focusIndex==0?'cn':'en')"
                >{{ $t('common.btn.export') }} DOC</el-button>
                <el-button
                    v-if="dataType === 2"
                    type="text"
                    style="float: right; margin-right: 8px;"
                    @click="exportPdf(focusIndex==0?'cn':'en')"
                >{{ $t('common.btn.export') }} PDF</el-button>
            </template>
            <template
                v-if="($store.state.session.mockUser && $store.state.session.mockUser.type == 2)"
            >
                <el-button
                    v-if="dataType != 2"
                    type="text"
                    style="float: right;"
                    @click="exportDoc(focusIndex==0?'cn':'en')"
                >{{ $t('common.btn.export') }} DOC</el-button>
                <el-button
                    v-if="dataType === 2"
                    type="text"
                    style="float: right; margin-right: 8px;"
                    @click="exportPdf(focusIndex==0?'cn':'en')"
                >{{ $t('common.btn.export') }} PDF</el-button>
            </template>
        </div>
        <el-card shadow="never" body-style="padding:24px 0 0;">
            <div v-if="focusIndex === 0">
                <h2 style="text-align: center">{{ schemeInfo.name }}</h2>
                <div v-for="(item, index) in schemeChapters" :key="index" style="padding: 24px;">
                    <div v-if="item.contentType == 1">
                        <h3
                            :style="{fontSize: item.fontSize + 'px'}"
                            :class="{'new-record': item.changeStatus == 1,'edit-record': item.changeStatus == 2,'remove-record': item.changeStatus == 3, }"
                        >{{ item.name }}</h3>
                        <p style="word-break: keep-all" v-html="item.content"/>
                        <hr>
                    </div>
                    <div v-if="item.contentType == 2">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.name }}</h3>
                        <div v-if="item.detailTable">
                            <p v-html="item.detailTable.contentBefore"/>
                            <courseCategoryForm
                                v-if="item.detailTable.table==1"
                                :template-id="id"
                                :is-read="true"
                                :data-type="dataType"
                                :template-id-origin="templateIdOrigin"
                            />
                            <courseForm
                                v-if="item.detailTable.table==2"
                                :template-id="id"
                                :is-read="true"
                                :data-type="dataType"
                                :in-change="schemeInfo.status == (2 || 5)"
                            />
                            <!-- <template v-if="item.detailTable.table == 1">
                                <courseCategoryForm
                                    v-if="!hasDirection"
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="dataType"
                                    :in-change="schemeInfo.status == 5"
                                />
                                <courseCategory
                                    v-else
                                    :template-id="id"
                                    :data-type="dataType"
                                    :in-change="schemeInfo.status == 5"
                                    :is-read="true"
                                    :template-id-origin="templateIdOrigin"
                                />
                            </template>
                            <template v-if="item.detailTable.table==2">
                                aadsdf {{item.contentType}}
                                <graduateCourseForm
                                    v-if="projId == 2"
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="dataType"
                                    :in-change="schemeInfo.status == 5"
                                    :proj-id="projId"
                                />
                                <courseForm
                                    v-else
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="dataType"
                                    :in-change="schemeInfo.status == 5"
                                    :proj-id="projId"
                                />

                                ddd
                            </template> -->
                            <p v-html="item.detailTable.contentAfter"/>
                        </div>
                        <hr>
                    </div>
                    <div v-if="item.contentType == 3 || item.isOldContent">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.name }}</h3>
                        <div>
                            <p v-if="item.detailTable" v-html="item.detailTable.contentBefore"/>
                            <courseCategoryForm
                                v-if="item.detailTable.table==1"
                                :template-id="id"
                                :is-read="true"
                                :data-type="dataType"
                                :template-id-origin="templateIdOrigin"
                            />
                            <courseForm
                                v-if="item.detailTable.table==2"
                                :template-id="id"
                                :is-read="true"
                                :data-type="dataType"
                                :in-change="schemeInfo.status == (2 || 5)"
                            />
                            <!-- <template>
                                <graduateCourseForm
                                    v-if="projId == 2"
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="dataType"
                                    :in-change="schemeInfo.status == 5"
                                    :proj-id="projId"
                                />
                                <courseForm
                                    v-else
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="dataType"
                                    :in-change="schemeInfo.status == 5"
                                    :proj-id="projId"
                                />
                            </template> -->
                            <p v-if="item.detailTable" v-html="item.detailTable.contentAfter"/>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
            <div v-if="focusIndex === 1">
                <h2 style="text-align: center">{{ schemeInfo.nameEn }}</h2>
                <div v-for="(item, index) in schemeChapters" :key="index" style="padding: 24px;">
                    <div v-if="item.contentType == 1">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.nameEn }}</h3>
                        <p style="word-break: keep-all" v-html="item.contentEn"/>
                        <hr>
                    </div>
                    <div v-if="item.contentType == 2">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.nameEn }}</h3>
                        <div v-if="item.detailTable">
                            <p v-html="item.detailTable.contentBeforeEn"/>
                            <courseCategoryFormEn
                                v-if="item.detailTable.table==1"
                                :template-id="id"
                                :is-read="true"
                                :data-type="dataType"
                                :template-id-origin="templateIdOrigin"
                            />
                            <courseFormEn
                                v-if="item.detailTable.table==2"
                                :template-id="id"
                                :is-read="true"
                                :data-type="dataType"
                                :in-change="schemeInfo.status == (2 || 5)"
                            />
                            <!-- <template v-if="item.detailTable.table == 1">
                                <courseCategoryForm
                                    v-if="!hasDirection"
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="dataType"
                                    :in-change="schemeInfo.status == 5"
                                />
                                <courseCategory
                                    v-else
                                    :template-id="id"
                                    :data-type="dataType"
                                    :in-change="schemeInfo.status == 5"
                                    :is-read="true"
                                    :template-id-origin="templateIdOrigin"
                                />
                            </template>
                            <template v-if="item.detailTable.table==2">
                                <graduateCourseForm
                                    v-if="projId == 2"
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="dataType"
                                    :proj-id="projId"
                                />
                                <courseForm
                                    v-else
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="dataType"
                                    :proj-id="projId"
                                />
                            </template> -->
                            <p v-html="item.detailTable.contentAfterEn"/>
                        </div>
                        <hr>
                    </div>
                    <div v-if="item.contentType == 3 || item.isOldContent">
                        <h3 :style="{fontSize: item.fontSize + 'px'}">{{ item.nameEn }}</h3>
                        <div>
                            <p v-if="item.detailTable" v-html="item.detailTable.contentBeforeEn"/>
                            <courseCategoryFormEn
                                v-if="item.detailTable.table==1"
                                :template-id="id"
                                :is-read="true"
                                :data-type="dataType"
                                :template-id-origin="templateIdOrigin"
                            />
                            <courseFormEn
                                v-if="item.detailTable.table==2"
                                :template-id="id"
                                :is-read="true"
                                :data-type="dataType"
                                :in-change="schemeInfo.status == (2 || 5)"
                            />
                            <!-- <template>
                                <graduateCourseForm
                                    v-if="projId == 2"
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="dataType"
                                    :in-change="schemeInfo.status == 5"
                                    :proj-id="projId"
                                />
                                <courseForm
                                    v-else
                                    :template-id="id"
                                    :is-read="true"
                                    :data-type="dataType"
                                    :in-change="schemeInfo.status == 5"
                                    :proj-id="projId"
                                />
                            </template> -->
                            <p v-if="item.detailTable" v-html="item.detailTable.contentAfterEn"/>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import * as API from 'common/src/api/culture/cultruescheme'

// import courseCategory from './courseCategory'
// import graduateCourseForm from '../culturetemplate/graduate/courseForm'
import courseCategoryForm from '../culturetemplate/courseCategoryForm'
import courseCategoryFormEn from '../culturetemplate/graduate/courseCategoryFormEn'
import courseForm from '../culturetemplate/courseForm'
import courseFormEn from '../culturetemplate/graduate/courseFormEn'

import UTILS from 'common/src/utils/utils'
export default {
    // name: 'schemePreview',
    components: {
        // courseCategory,
        // graduateCourseForm,
        courseCategoryForm,
        courseCategoryFormEn,
        courseForm,
        courseFormEn
    },
    props: {
        dataType: {
            default: '1', // 1为模板，2为方案
            type: String
        },
        id: {
            default: '', // 当前方案Id
            type: String
        },
        templateIdOrigin: {
            default: null,
            type: String
        }
    },
    data() {
        return {
            topNavItems: [
                {
                    label: this.$t('culture.scheme.inputChaptersCn'),
                    index: 0,
                    active: true
                },
                {
                    label: this.$t('culture.scheme.inputChaptersEn'),
                    index: 1,
                    active: false
                }
            ],
            lang: 'cn',
            focusIndex: 0,
            schemeInfo: {},
            schemeChapters: {},
            dic: {},
            showDic: false,
            cultureId: '',
            projId: ''
        }
    },
    computed: {
        hasDirection() {
            return this.schemeInfo.isDirection == '1'
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            const params = {}
            this.dataType = this.$route.params.dataType || this.dataType
            if (parseInt(this.dataType) === 2) {
                params.cultureId = this.id || this.$route.params.id
            } else {
                params.templateId =
                    this.templateId ||
                    this.$route.params.templateId ||
                    this.id ||
                    this.$route.params.id
            }
            this.id = this.templateId = params.cultureId || params.templateId

            this.getSchemeChapters(params)
            if (parseInt(this.dataType) === 2) this.getCultureScheme()
            else this.getTemplateInfo(params.templateId)
        },
        getSchemeChapters(params) {
            API.getSchemeChapters(params).then(res => {
                if (res && res.code === 200) {
                    this.schemeChapters = res.data.map((ele, index) => {
                        ele.name =
                            UTILS.numberToChinese(index + 1) + '、' + ele.name
                        ele.nameEn = index + 1 + '.' + ele.nameEn
                        return ele
                    })
                }
            })
        },
        // 获取模板信息
        getCultureScheme() {
            const data = {
                id: this.id ? this.id : ''
            }
            API.getCultureScheme(data)
                .then(res => {
                    if (res && res.code === 200) {
                        this.schemeInfo = res.data
                        this.projId = res.data.projId
                    }
                })
                .catch(e => {
                    this.$message({
                        type: 'error',
                        message: this.$t('culturePlan.queryShemeFail')
                    })
                })
        },
        clickItem(item) {
            this.lang = item.index === 0 ? 'cn' : 'en'
            this.topNavItems.forEach(nav => {
                nav.active = false
            })
            item.active = true
            this.focusIndex = item.index
        },
        exportPdf(language) {
            const path =
                '/api/cultureservice/cultureScheme/exportCultureSchemePdf?id=' +
                    this.id +
                    '&x-token=' +
                    (this.$store.state.session.sessionid ||
                localStorage.getItem('sessionid') ||
                '') + '&language=' + language
            window.open(path)
        },
        exportDoc(language) {
            const path =
                '/api/cultureservice/cultureScheme/exportCultureScheme?id=' +
                    this.id +
                    '&x-token=' +
                    (this.$store.state.session.sessionid ||
                localStorage.getItem('sessionid') ||
                '') + '&language=' + language
            window.open(path)
        },
        // 获取模板信息
        getTemplateInfo(id) {
            API.getTemplateById(id)
                .then(response => {
                    if (response.code === 200) {
                        this.schemeInfo = response.data
                        this.projId = response.data.projId
                    }
                })
                .catch(e => {
                    this.$message({
                        type: 'error',
                        message: this.$t('culturePlan.graduatePlan.queryTemplateFail')
                    })
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.edu-page-title {
    span {
        cursor: pointer;
        display: inline-block;
        padding-right: 10px;
    }
    span.active {
        color: #2876c2;
    }
}

.border-right {
    margin-right: 10px;
}
</style>
